<!DOCTYPE html>
<html>
<head>
    <title>服刑人员逃逸事件处置</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console3.css') }}"/>

    <!-- 主 题 更 换 -->
    <style id="pearadmin-bg-color"></style>

</head>
<body class="pear-container">
<div>

    <div class="layui-row layui-col-space10">
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-header">监所成员分配信息</div>
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-tree1" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-header">摄像头监控情况统计</div>
                <div class="layui-card-body">
                    <table id="building-table" lay-filter="building-table"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md11">
            <div class="layui-card">
                <div class="layui-card-header">人员进出统计</div>
                <div class="layui-card-body1">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-tree" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                    </div>
                </div>
            </div>
            <!--<div class="layui-card">
                <div class="layui-card-header">
                    楼栋数据
                </div>
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-bar" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                    </div>
                </div>
            </div>-->
        </div>
    </div>
</div>
<!--</div>-->

{% include 'admin/common/footer.html' %}
<script>

    //监所成员分配信息
    layui.use(['echarts'], function () {

        var echarts = layui.echarts
        var chartDom = document.getElementById('echarts-tree1');
        var myChart = echarts.init(chartDom);
        var option

        myChart.showLoading();
        const data = {
            name: 'xxx监狱长',
            children: [
                {
                    name: 'xxx副监狱长',
                    children: [
                        {
                            name: '小组1',
                            children: [
                                { name: '成员1', value: 721 },
                                { name: '成员2', value: 4294 }
                            ]
                        },
                        {
                            name: '小组2',
                            children: [
                                { name: '成员1', value: 721 },
                                { name: '成员2', value: 4294 }
                            ]
                        }
                    ]
                },
                {
                    name: 'xxx 副监狱长',
                    children: [
                        { name: '成员1', value: 8833 },
                        { name: '成员2', value: 1732 },
                        { name: '成员3', value: 3623 }
                    ]
                },
                {
                    name: 'xxx 副监狱长',
                    children: [
                        { name: '小组1', value: 1616 },
                        { name: '小组2', value: 1027 },
                        { name: '小组3', value: 3891 },
                        { name: '小组4', value: 891 }
                    ]
                },
                {
                    name: 'xxx 副监狱长',
                    children: [
                        { name: '小组1', value: 2105 },
                        { name: '小组2', value: 1316 },
                        { name: '小组3', value: 3151 }
                    ]
                }
            ]
        };

        myChart.hideLoading();
        myChart.setOption(
            (option = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                legend: {
                    top: '2%',
                    left: '3%',
                    orient: 'vertical',
                    data: [
                        {
                            name: '部门',
                            icon: 'rectangle'
                        }
                    ],
                    borderColor: '#c23531'
                },
                series: [
                    {
                        type: 'tree',
                        name: '部门',
                        data: [data],
                        top: '5%',
                        left: '30%',
                        bottom: '2%',
                        right: '35%',
                        symbolSize: 7,
                        label: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right'
                        },
                        leaves: {
                            label: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        },
                        emphasis: {
                            focus: 'descendant'
                        },
                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }
                ]
            })
        );


        option && myChart.setOption(option);

        window.onresize = function () {
            myChart.resize()
        }

    })

    //楼宇情况统计
    layui.use(['table', 'form', 'jquery', 'popup', 'common'], function () {
        let table = layui.table
        let form = layui.form
        let $ = layui.jquery
        let popup = layui.popup
        let common = layui.common
        let MODULE_PATH = '/admin/earth/'

        // 表格数据
        let cols = [
            [
                { title: '楼栋名称', field: 'Name', align: 'center', width: 100 },
                { title: '进出时间', field: 'Num', align: 'center', width: 100},
                { title: '进出情况', field: 'People1', align: 'center', width: 100},
                { title: '进出者', field: 'People2', align: 'center'},
            ]
        ]

        // 渲染表格数据
        table.render({
            elem: '#building-table',
            url: MODULE_PATH + 'building',
            page: true,
            cols: cols,
            skin: 'line',
            height: 'full-148',
            toolbar: '#user-toolbar', /*工具栏*/
            text: { none: '暂无信息' },
            defaultToolbar: [{ layEvent: 'refresh', icon: 'layui-icon-refresh' }, 'filter', 'print', 'exports'] /*默认工具栏*/
        })


        //
        $('.user-group').click(function () {
            let group = $(this).attr('user-group')
            let field = form.val('user-query-form')
            if (group === '-1') {
                field.deptId = group
                $(this).removeClass('button-default')
                $(this).prev().removeClass('button-primary')
                $(this).prev().addClass('button-default')
                $(this).addClass('button-primary')
            } else {
                field.deptId = group
                $(this).removeClass('button-default')
                $(this).next().removeClass('button-primary')
                $(this).next().addClass('button-default')
                $(this).addClass('button-primary')
            }
            window.refresh(field)
        })


        form.on('submit(user-query)', function (data) {
            window.refresh(data.field)
            return false
        })

        form.on('switch(user-enable)', function (obj) {
            let operate
            if (obj.elem.checked) {
                operate = 'enable'
            } else {
                operate = 'disable'
            }
            let loading = layer.load()
            $.ajax({
                url: '/admin/user/' + operate,
                data: JSON.stringify({ userId: this.value }),
                dataType: 'json',
                contentType: 'application/json',
                type: 'put',
                success: function (result) {
                    layer.close(loading)
                    if (result.success) {
                        popup.success(result.msg)
                    } else {
                        popup.failure(result.msg)
                    }
                }
            })
        })


        window.refresh = function (param) {
            table.reload('building-table', { where: param })
        }
    })

    //人员进出统计
    layui.use(['echarts'], function () {

        var echarts = layui.echarts
        var chartDom = document.getElementById('echarts-tree');
        var myChart = echarts.init(chartDom);
        var option

        option = {
            title: {
                text: '重点区域人监控记录人员进出情况',
                subtext: '人数'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['进入人数', '离开人数']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    // prettier-ignore
                    data: ['宿舍楼1', '宿舍楼2', '宿舍楼3', '餐厅1', '餐厅2', '活动区域1', '活动区域2', '活动区域3', '工作区1', '工作区2', '操场1', '操场2']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '进入人数',
                    type: 'bar',
                    data: [
                        51, 49, 70, 232, 256, 167, 135, 162, 326, 200, 64, 133
                    ],
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                },
                {
                    name: '离开人数',
                    type: 'bar',
                    data: [
                        26, 59, 90, 264, 287, 107, 175, 182, 48, 188, 60, 123
                    ],
                    markPoint: {
                        data: [
                            { name: 'Max', value: 287, xAxis: 3.6, yAxis: 288 },
                            { name: 'Min', value: 26, xAxis: 0.4, yAxis: 27 }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                }
            ]
        };


        option && myChart.setOption(option);

        window.onresize = function () {
            myChart.resize()
        }

    })

    //楼栋情况
    layui.use(['echarts'], function () {
        var echarts = layui.echarts

        var chartDom = document.getElementById('echarts-bar');
        var myChart = echarts.init(chartDom);
        var option
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // Use axis to trigger tooltip
                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: {
                type: 'value'
            },
            xAxis: {
                type: 'category',
                data: ['楼1', '楼2', '楼3', '楼4', '楼5', '楼6', '楼7']
            },
            series: [
                {
                    name: '犯人人数',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 302, 301, 334, 390, 330, 100]
                },
                {
                    name: '层数',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [5, 5, 8, 7, 6, 6, 6]
                },
                {
                    name: '巡逻警员数',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [20, 25, 28, 26, 26, 25, 26]
                },
                {
                    name: '出口入口数',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [5, 10, 10, 10, 10, 10, 5]
                }
            ]
        };

        option && myChart.setOption(option);

        window.onresize = function () {
            myChart.resize()
        }

    })
</script>
</body>
</html>